<template>
  <div class="hot-words">
    <ul>
      <li v-for="hotWorld in hotWorlds">
        <a :href="hotWorld.url" :style="hotWorld.style">
          {{hotWorld.label}}
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
  import {HOT_WORLD} from '@util/constant'

  export default {
    name: "HotWords",
    model: {},
    props: {

    },
    data() {
      return {
        hotWorlds: HOT_WORLD
      }
    },
    computed: {},
    beforeCreate: function () {

    },
    created: function () {

    },
    beforeMount: function () {

    },
    mounted: function () {

    },
    updated: function () {

    },
    activated: function () {

    },
    deactivated: function () {

    },
    beforeDestroy: function () {

    },
    destroyed: function () {

    },
    methods: {}
  }
</script>

<style scoped lang="scss">
  .hot-words{
    padding-top: 20px;

    ul {
      list-style: none;
      padding: 0;
      margin: 0;
      height: 40px;
      width: 750px;
      font-weight: 300;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;

      li {
        line-height: 40px;

        a{
          text-decoration: none;
          color: black;
          &:hover {
            color: red;
          }
        }
      }

    }
  }


</style>
